<template>
  <view class="container">
    <view class="header">
      <h1>实名认证</h1>
    </view>

    <view class="description">
      <p>
        根据《国家网络信息安全法》规定，为了你的相关安全，必须要求用户完善实名信息。信息仅用于验证身份场景。
      </p>
    </view>

    <!-- 输入框 -->
    <view class="input-group">
      <input
        type="text"
        placeholder="请输入本人真实姓名"
        v-model="realName"
      />
    </view>
    <view class="input-group">
      <input
        type="text"
        placeholder="请输入您的身份证号码"
        v-model="idCard"
      />
    </view>
    <text class="warning">
      * 使用他人身份信息认证一经发现永久封号
    </text>

    <!-- 提交按钮 -->
    <button class="submit-button" @click="submitVerification">
      立即认证
    </button>

    <view class="manual-review">
      <text>人工审核通道</text>
      <button @click="contactSupport">联系客服</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      realName: '', // 用户真实姓名
      idCard: '' // 用户身份证号
    };
  },
  methods: {
    submitVerification() {
      if (!this.realName || !this.idCard) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      // 模拟提交实名认证
      uni.showLoading({ title: '认证中...' });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '认证成功',
          icon: 'success'
        });
      }, 2000);
    },
    contactSupport() {
      // 模拟联系客服
      uni.showModal({
        title: '联系客服',
        content: '请拨打客服电话：123-456-789',
        showCancel: false
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
  /* background-color: #f7f7f7; */
}
.header h1 {
  font-size: 24px;
  text-align: center;
  font-weight: bold;
}
.description p {
  font-size: 14px;
  color: #666;
  margin-top: 18px;
}
.input-group {
  margin-top: 20px;
}
input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
}
.warning {
  font-size: 12px;
  color: red;
  margin-top: 10px;
}
.submit-button {
  width: 100%;
  background-color: #007aff;
  color: white;
  text-align: center;
  border-radius: 5px;
  margin-top: 20px;
}
.manual-review {
  margin-top: 30px;
  text-align: center;
}
.manual-review text {
  font-size: 14px;
  color: #007aff;
}
</style>
